<template>
  <div>
    <div class="operate">
      <el-button class="mr-8" type="warning" @click="operateRow('add')">新增</el-button>
      <el-input class="mr-8 w-200" placeholder="请输入姓名" clearable />
      <el-button type="danger">查询</el-button>
      <el-button class="mr-8" type="default">重置</el-button>
    </div>
    <div class="mt-16">
      <el-table
        :data="tableData"
        :header-cell-style="headerCellStyle"
        style="width: 100%"
        height="calc(100vh - 260px)"
        row-key="id"
        border
        default-expand-all
      >
        <el-table-column prop="leaderName" label="姓名" />
        <el-table-column prop="leaderType" label="类型" />
        <el-table-column prop="leaderSex" label="性别" />
        <el-table-column prop="leaderMobile" label="联系电话" />
        <el-table-column prop="leaderJob" label="职务" />
        <el-table-column prop="workTime" label="值班时间" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" link @click="operateRow('edit', row)">编辑</el-button>
            <el-button type="primary" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex mt-16">
        <el-pagination
          class="ml-auto"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[100, 200, 300, 400]"
          :total="400"
          layout="total, sizes, prev, pager, next, jumper"
          small
        />
      </div>
    </div>
    <el-dialog :title="dialogTitle" v-model="operateVisible" width="50%" destroy-on-close>
      <DynamicForm :formObj="state.formData" :formItemList="formItemList" autoRules />
      <template #footer>
        <span>
          <el-button @click="operateVisible = false">取消</el-button>
          <el-button type="warning" @click="operateVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import DynamicForm from '../components/DynamicForm.vue'

const operateVisible = ref(false)
const dialogTitle = ref('')
const tableData = ref([
  {
    id: 1,
    leaderName: '马哲',
    leaderType: '值班领导',
    leaderSex: '男',
    leaderMobile: '153****2345',
    leaderJob: '书记',
    workTime: '周一、周二、周三、周四'
  },
  {
    id: 2,
    leaderName: '马哲',
    leaderType: '值班领导',
    leaderSex: '男',
    leaderMobile: '153****2345',
    leaderJob: '书记',
    workTime: '周一、周二、周三、周四'
  },
  {
    id: 3,
    leaderName: '马哲',
    leaderType: '值班领导',
    leaderSex: '男',
    leaderMobile: '153****2345',
    leaderJob: '书记',
    workTime: '周一、周二、周三、周四',
    children: [
      {
        id: 31,
        leaderName: '马哲',
        leaderType: '值班领导',
        leaderSex: '男',
        leaderMobile: '153****2345',
        leaderJob: '书记',
        workTime: '周一、周二、周三、周四'
      },
      {
        id: 32,
        leaderName: '马哲',
        leaderType: '值班领导',
        leaderSex: '男',
        leaderMobile: '153****2345',
        leaderJob: '书记',
        workTime: '周一、周二、周三、周四'
      }
    ]
  },
  {
    id: 4,
    leaderName: '马哲',
    leaderType: '值班领导',
    leaderSex: '男',
    leaderMobile: '153****2345',
    leaderJob: '书记',
    workTime: '周一、周二、周三、周四'
  }
])

const state = reactive({
  formData: {
    leaderName: '',
    leaderType: '',
    leaderSex: 1,
    leaderMobile: '',
    leaderJob: '',
    workTime: ['周一']
  }
})
const formItemList = [
  {
    label: '姓名',
    name: 'leaderName',
    require: true,
    type: 'select',
    labelFiled: 'name',
    valueFiled: 'id',
    options: [
      {
        id: 1,
        name: '马哲'
      },
      {
        id: 2,
        name: '哲马'
      }
    ]
  },
  {
    label: '类型',
    name: 'leaderType',
    require: true,
    type: 'select',
    labelFiled: 'name',
    valueFiled: 'id',
    options: [
      {
        id: 1,
        name: '省级组织'
      },
      {
        id: 2,
        name: '县级组织'
      }
    ]
  },
  {
    label: '性别',
    name: 'leaderSex',
    require: false,
    type: 'radioGroup',
    labelFiled: 'name',
    valueFiled: 'id',
    options: [
      {
        id: 1,
        name: '男'
      },
      {
        id: 2,
        name: '女'
      }
    ]
  },
  {
    label: '联系电话',
    name: 'leaderMobile',
    require: false,
    type: 'input'
  },
  {
    label: '职务',
    name: 'leaderJob',
    require: false,
    type: 'input'
  },
  {
    label: '值班时间',
    name: 'workTime',
    require: false,
    type: 'checkboxGroup',
    options: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  }
]

const currentPage = ref(1)
const pageSize = ref(10)
const headerCellStyle = computed(() => {
  return { background: '#f0f0f0' }
})

function operateRow(type, row) {
  state.formData =
    type === 'add'
      ? {
          leaderName: '',
          leaderType: '',
          leaderSex: 1,
          leaderMobile: '',
          leaderJob: '',
          workTime: ['周一']
        }
      : row
  dialogTitle.value = `${type === 'add' ? '新增' : '编辑'}`
  operateVisible.value = true
  console.log('row', row)
}
</script>

<style lang="scss" scoped>
@import url('../styles/global.css');
.operate {
  display: flex;
}
</style>
